<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" href="../../model/jsFn.css">
    <link rel="stylesheet" href="../../model/element.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< img ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_src">src() ----------设置图片路径</a></p></li>
                <li><p><a href="#jsFn_corner">corner() ----------设置角标</a></p></li>
                <li><p><a href="#jsFn_clearCorner">clearCorner() ----------清空角标</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_corner">corner -------角标</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>img</h2>
    <div>简介:</div>
    <p>常在text，button等里作为子标签或者单独使用，显示图片</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <img attr='50,30'>img.arrow_down.png</img>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>attr</td>
                    <td>int <br/>例：attr="50" /attr="50,60"</td>
                    <td>控件内所有图片的宽高属性，默认宽高都为35dp,如果内标签img有这个属性，按照内标签属性为准，参数为1个时，宽高一致；参数为2个时，第一个为宽，第二个为高</td>
                </tr>
                <tr>
                    <td>val</td>
                    <td>JavaScript</td>
                    <td>执行这个JS字符串可以得到一个图片路径或者图片的网络地址</td>
                </tr>
                <tr>
                    <td>src</td>
                    <td>string</td>
                    <td>图片路径或者图片的网络地址</td>
                </tr>
                <tr>
                    <td>scale</td>
                    <td>centerCrop||centerInside||fitCenter</td>
                    <td>图片伸缩类型</td>
                </tr>
                <tr>
                    <td>corner</td>
                    <td>string</td>
                    <td>角标</td>
                </tr>
                <tr>
                    <td>radius</td>
                    <td>int</td>
                    <td>圆角</td>
                </tr>
                <tr>
                    <td>blur</td>
                    <td>int</td>
                    <td>模糊程度</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>单独使用时，必须设置height属性</p>
        <p></p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/img.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_src">
        <h3>src:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>img.src(url) -> void</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>修改文本内容</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.2</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>url</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>图片路径或者图片网络地址</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>void</p>
            <p>没有返回值</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < img attr='12.7,7.3' id="img">img.arrow_down.png< /img>
                    document.$("img").src('img.xxx.jpg');
                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_corner">
        <h3>corner:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>img.corner([options]) -> void</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置角标</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.2</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>options</p>
                    <p>&nbsp;null||string||{}&nbsp;</p>
                    <p>若为空,则角标为一个点;若为string,则只更改角标文字,颜色大小不变;若为{},则参考options具体属性</p>
                </li>
                <li>
                    <p>options.text</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>角标文字</p>
                </li>
                <li>
                    <p>options.textSize</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>角标文字大小</p>
                </li>
                <li>
                    <p>options.textColor</p>
                    <p>&nbsp;color&nbsp;</p>
                    <p>角标文字颜色</p>
                </li>
                <li>
                    <p>options.backgroundSize</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>角标背景半径大小</p>
                </li>
                <li>
                    <p>options.backgroundColor</p>
                    <p>&nbsp;color&nbsp;</p>
                    <p>角标背景颜色</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>void</p>
            <p>没有返回值</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < img attr='12.7,7.3' id="img">img.arrow_down.png< /img>
                    document.$("img").src('img.xxx.jpg');
                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_clearCorner">
        <h3>clearCorner:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>img.clearCorner() -> void</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>清空角标</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.2</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>void</p>
            <p>没有返回值</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < img corner='52' attr='12.7,7.3' id="img">img.arrow_down.png< /img>
                    document.$("img").clearCorner();
                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_corner">
        <h3>corner</h3>
        <p>请查看 <a href="corner.html">corner</a></p>
    </div>
</div>
<div class="author">
    <p>by-沛华</p>
</div>
</body>
</html>